<script setup lang="ts">

</script>

<template>
  <el-container class="ContentsNoInput">
    <div class="ContentsNoInput_1">
      <slot name="main"></slot>
    </div>
  </el-container>
</template>

<style scoped>
.ContentsNoInput {
  width: 100%;
  height: 90%;

  background-image: linear-gradient(163deg, #00ff75 0%, #3700ff 100%);
  border-radius: 20px;
  transition: all .3s;
}

.ContentsNoInput_1 {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-content: center;
  background-color: #545c64;
  border-radius:20px;
  transition: all .2s;
}

.ContentsNoInput:hover {
  box-shadow: 0 0 20px 3px rgba(64, 158, 225, 0.90), /* 下方发光 */
  0 20px 20px -20px rgba(64, 158, 225, 0.90), /* 右侧发光 */
  0 -20px 20px -20px rgba(64, 158, 225, 0.90), /* 左侧发光 */
  20px 0 20px -20px rgba(64, 158, 225, 0.90); /* 上方发光 */
  backdrop-filter: blur(10px);
}

.ContentsNoInput_1:hover {
  transform: scale(0.9965, 0.996);
  border-radius: 20px;
}
</style>